<template>
  <div>
    <!-- 二级路由的坑 -->
    <router-view v-if="$route.path=='/home/search'" ></router-view>
    <!-- <router-view v-if="$route.path=='/home/Topsearch'" ></router-view> -->
    <!-- 搜索框 -->
    <div v-else>
      <van-search
      v-model="value"
      shape="round"
      background="White"
      placeholder="请输入搜索关键词"
      @click='$router.push("/home/search")'
    />
    <!-- 轮播图 -->
    <Swipe :bannerArr="bannerArr"></Swipe>
    <!-- 导航组件 -->
    <Grid :channelArr="channelArr"></Grid>
    <!-- 品牌制造商直供 -->
    <Brand :brandList="brandList"></Brand>
    <!-- 新品首发 -->
    <Thenewstart :newGoodsList="newGoodsList"></Thenewstart>
    <!-- 人气推荐 -->
    <Recommended :hotGoodsList="hotGoodsList"></Recommended>
    <!-- 精品专选 -->
    <Projectselection :topicList="topicList"></Projectselection>
    <!-- 居家 -->
    <div v-for="item in categoryList" :key="item.id">
    <Eathutch :name="item.name" :items="item.goodsList"></Eathutch>
    </div>
    </div>
  </div>
</template>

<script>
//引入轮播图组件
import Swipe from "@/components/Swipe";
//导入首页接口请求
import { getIndexData } from "@/utils/http";
// console.log(getIndexData);
import Grid from "@/components/Grid.vue";
import Brand from "@/components/Brand.vue";
//引入新平首发
import Thenewstart from "@/components/Thenewstart";
//引入人气推荐
import Recommended from "@/components/Recommended";
//引入精品专选
import Projectselection from "@/components/Projectselection";
// 引入居家下面的数组
import Eathutch from "@/components/Eathutch"
export default {
  name: "Home",
  data() {
    return {
      value: "", //搜索关键字
      bannerArr: [], //轮播图数据
      channelArr: [], //导航数组
      brandList: [], //品牌制造商直供
      newGoodsList: [], //新品首发
      hotGoodsList: [], //人气推荐
      topicList: [], //精品专选
      categoryList:[], //居家
    };
  },
  components: {
    Swipe,
    Grid,
    Brand,
    Thenewstart,
    Recommended,
    Projectselection,
    Eathutch,
  },
  created() {
    console.log(this.$route.path);
    getIndexData().then((res) => {
      // console.log(res);
      // console.log(this.channelArr);
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandList = res.data.data.brandList;
      this.newGoodsList = res.data.data.newGoodsList;
      this.hotGoodsList = res.data.data.hotGoodsList;
      this.topicList = res.data.data.topicList;
      this.categoryList=res.data.data.categoryList;
    });
  },
};
</script>

<style>
</style>